<template>
	<gracePage headerBG="#f4f4f4">
		<view slot="gHeader" class="main-bodybg-color">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">退货/售后</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons my-icons"></text>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody">
		<view v-if="goodsArr.length == 0" class="mt-5">
			<graceEmptyNew>
				<view slot="img" class="empty-view">
					<!-- 请根据您的项目要求制作并更换为空图片 -->
					<image class="empty-img" mode="widthFix" src="/static/images/loding.png"></image>
				</view>
				<text slot="text" class="grace-text-small grace-gray">暂无数据</text>
			</graceEmptyNew>
		</view>
		<view v-else v-for="(goods, indexItem) in goodsArr" :key="indexItem">
			<view class="grace-card-view mt-0">
				<view class="grace-space-between grace-border-b pb-1">
					<text class="">订单信息</text>
					<text class="grace-red">{{goods.refund_type == '1' ? '退货' : '退款'}}</text>
				</view>
				<view class="grace-list my-2">
					<view class="grace-list-items">
						<view class="my-list-image ucenter-face grace-relative">
							<image class="my-list-image ucenter-face-image" :src="goods.goods_thumb" mode="widthFix"></image>
						</view>
						<view class="grace-list-body">
							<view class="grace-list-title">
								<text class="my-list-title-text grace-h4 grace-ellipsis">{{ goods.goods_name }}</text>
							</view>
							<view class="grace-list-title pb-1">
								<text class="my-list-title-text grace-black9 grace-text">{{ goods.goods_attr }}</text>
							</view>
							<view class="grace-space-between mt-1 grace-flex-vcenter">
								<text class="grace-h5 grace-red">￥{{ goods.shop_price }}</text>
								<text class="font-size-22 pr-2">x{{ goods.return_number }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class=" my-2">
					<view class="grace-card-title">
						<text class="grace-card-name">订单状态</text>
						<text class="grace-card-name grace-text-small grace-gray">{{ goods.name1 }}</text>
						<text class="grace-card-name grace-text-small grace-gray">{{ goods.name2 }}</text>
					</view>
				</view>
				<view class="grace-flex-end">
					<view  @click="gotoInfo(goods.ret_id)">
						<button type="primary" class="grace-button my-footer-button my-1 grace-tbr-large " plain="true">查看详情</button>
					</view>
				</view>
			</view>
			<divider></divider>
		</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
export default {
	data() {
		return {
			goodsArr: [],
			gotoStatus: true
		};
	},
	onLoad: function(e) {
		this.__init();
	},
	methods: {
		async __init() {
			let data = await this.$HTTP.post('/api/api.php', { act: 'get_returnlist' }, { token: true });
			if(data.error) return;
			this.goodsArr = data;
			console.log('datsdasd', data);
		},
		gotoInfo(retid) {
			// 页面跳转
			console.log(1111)
			if (this.gotoStatus) {
				console.log(222222)
				this.gotoStatus = false;
				uni.navigateTo({
					url: '/pages/order/orderAfterSaleDetails/orderAfterSaleDetails?retid=' + retid,
					complete: () => {
						this.gotoStatus = true;
					}
				});
			}
		}
	},
	components: { gracePage }
};
</script>
<style scoped>
page {
	background: #f4f4f4;
}
.my-footer-button {
	width: 159rpx;
	height: 51rpx;
	padding: 0rpx 20rpx;
	line-height: 51rpx;
	font-size: 28rpx;
	text-align: center;
}
</style>
